<template>
  <view class="picture-box">
    <view class="author-info">
      <view class="tx">
        <image :src="tx" mode="aspectFill"></image>
      </view>
      <view class="base">
        <view class="name">{{ curAlbumInfo.name }}</view>
        <view class="datetime">{{ curAlbumInfo.datetime }}</view>
      </view>
    </view>

    <view class="cover-picture">
      <my-swiperAction @swiperAction="swiperActionHandle">
        <image :src="coverPicture" mode="widthFix"></image>
      </my-swiperAction>
      <view class="option">
        <view class="likeNum">
          <uni-icons type="hand-up" color="#5e6d82" size="20" />
          <text class="likeNum-text">434</text></view
        >
        <view class="collect"
          ><uni-icons type="heart" size="20" color="#5e6d82" />
          <text class="collect-text">收藏</text></view
        >
      </view>
    </view>

    <view class="related">
      <view class="related-text"> 相关 </view>
      <view class="related-content">
        <view class="smallPicture">
          <image :src="coverPicture" mode="aspectFill"></image>
        </view>
        <view class="right-model">
          <view class="album-title">
            <text class="album-tag"> 专辑 </text>
            <view class="album-name">
              {{ curAlbumInfo.title }}
            </view>
          </view>
          <uni-icons type="forward" size="24" class="forward" />
        </view>
      </view>
    </view>

    <view class="Comment" v-if="hotComment.length">
      <view class="comment-title">
        <uni-icons type="fire-filled" color="#ff1d3b" size="30" />
        最热评论
      </view>
      <view
        class="comment-item"
        v-for="(item, index) in hotComment"
        :key="index"
      >
        <view class="userTx">
          <image :src="item.userTx" mode="spaceFill"></image>
        </view>
        <view class="baseInfo">
          <view class="baseInfo-top">
            <view class="baseInfo-text">
              <view class="userName">{{ item.username }}</view>
              <view class="commentTime">2年前</view>
            </view>
            <view class="tagBox">
              <view
                class="tag"
                v-for="(tagItem, tagIndex) in item.tag"
                :key="tagIndex"
              >
                <image :src="tagItem.tagImg" mode="spaceFill"></image>
              </view>
            </view>
          </view>
          <view class="baseInfo-bottom">
            <view class="commentContainer">
              {{ item.commentContent }}
            </view>
            <view class="thumbNumber">
              <uni-icons type="hand-up" color="#757f99" size="24" />
              {{ item.likeNum }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="Comment" v-if="newComment.length">
      <view class="comment-title">
        <uni-icons type="calendar-filled" color="#b6dbf8" size="30" />
        最新评论
      </view>
      <view
        class="comment-item"
        v-for="(item, index) in newComment"
        :key="index"
      >
        <view class="userTx">
          <image :src="item.userTx" mode="spaceFill"></image>
        </view>
        <view class="baseInfo">
          <view class="baseInfo-top">
            <view class="baseInfo-text">
              <view class="userName">{{ item.username }}</view>
              <view class="commentTime">2年前</view>
            </view>
            <view class="tagBox">
              <view
                class="tag"
                v-for="(tagItem, tagIndex) in item.tag"
                :key="tagIndex"
              >
                <image :src="tagItem.tagImg" mode="spaceFill"></image>
              </view>
            </view>
          </view>
          <view class="baseInfo-bottom">
            <view class="commentContainer">
              {{ item.commentContent }}
            </view>
            <view class="thumbNumber">
              <uni-icons type="hand-up" color="#757f99" size="24" />
              {{ item.likeNum }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="downLoad">
      <view class="downLoad-text" @click="handleDownLoad"> 下载壁纸 </view>
    </view>
  </view>
</template>

<script>
import swiperAction from "@/components/public/swiperAction";
export default {
  components: {
    "my-swiperAction": swiperAction,
  },
  data() {
    return {
      curAlbumInfo: {},
      curPictureInfo: {},
      hotComment: [],
      newComment: [],
      curIndex: 0,
    };
  },
  methods: {
    getCurPictureInfo(index) {
      // console.log(getApp().globalData.album_list);
      this.curAlbumInfo = getApp().globalData.album_list;
      //   this.curPictureInfo = this.curAlbumInfo.morePictur[index];
      this.curPictureInfo = this.curAlbumInfo.pictureList[index];
      // console.log(this.curPictureInfo);
      // console.log(this.curPictureInfo);
      this.hotComment = this.curPictureInfo.hotComment;
      this.newComment = this.curPictureInfo.newComment;
    },
    async swiperActionHandle(e) {
      console.log(e);
      if (
        e.direction == "左滑" &&
        this.curIndex < this.curAlbumInfo.pictureList.length - 1
      ) {
        this.curIndex++;
      } else if (e.direction == "右滑" && this.curIndex > 0) {
        this.curIndex--;
      } else {
        uni.$showMsg("没有数据了");
        return; // 结束掉
      }

      uni.showLoading({
        title: "加载中...",
        mask: true, // 有一定的节流阀效果
      });
      await setTimeout(() => {
        uni.hideLoading();
      }, 500);
      this.getCurPictureInfo(this.curIndex);
    },
    async handleDownLoad() {
      // 将图片先下载到小程序缓存中
      const [err, { tempFilePath }] = await uni.downloadFile({
        // url: this.coverPicture,
        // url: "E:/englishPath/studyNode/前端/HBuilder/uni-app/dnpicture/src/static/image/1.jpg", // 这里需要填的是服务器那边的图片路径，而不是当前项目的image目录下的
        url: "https://i04piccdn.sogoucdn.com/73437c0bf69c7f81",
      });
      if (err != null) {
        uni.$showMsg("图片下载失败");
      } else {
        // 微信小程序临时文件存储的路径
        // console.log(tempFilePath);
        // 将小程序内存中的临时文件下载到本地上
        const result = await uni.saveImageToPhotosAlbum({
          filePath: tempFilePath,
        });
        if (result[1].errMsg == "saveImageToPhotosAlbum:ok") {
          uni.showToast({
            title: "图片已经保存在本地",
            icon: "success",
          });
        }
      }
    },
  },
  onLoad(option) {
    this.curIndex = option.index;
    this.getCurPictureInfo(this.curIndex);
  },
  computed: {
    tx() {
      return this.curAlbumInfo.txPicture;
    },
    coverPicture() {
      return this.curPictureInfo.pictureUrl;
    },
  },
};
</script>

<style lang="scss" scoped>
.picture-box {
  .author-info {
    display: flex;
    align-items: center;
    padding: 30rpx;
    .tx {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;
      image {
        height: 100%;
      }
    }

    .base {
      margin-left: 20rpx;
      .name {
        font-weight: 700;
        font-size: 30rpx;
      }

      .datetime {
        color: #ccc;
        font-size: 25rpx;
      }
    }
  }

  .cover-picture {
    border-bottom: 5rpx solid #eeeeee;
    image {
    }

    .option {
      display: flex;
      justify-content: space-around;
      padding: 20rpx 0;

      .collect,
      .likeNum {
        display: flex;
        align-items: center;
        color: #5e6d82;
        .collect-text,
        .likeNum-text {
          margin-left: 10rpx;
        }
      }
    }
  }

  .related {
    .related-text {
      color: #000;
      font-size: 30rpx;
      padding: 20rpx 0;
    }
    .related-content {
      display: flex;
      padding: 10rpx;
      .smallPicture {
        flex: 1;
        width: 200rpx;
        height: 200rpx;
        image {
          height: 100%;
        }
      }

      .right-model {
        flex: 2;
        display: flex;
        justify-content: space-between;
        padding: 10rpx 70rpx 0 20rpx;
        .album-title {
          .album-tag {
            padding: 8rpx 25rpx;
            background-color: $themeColor;
            color: #fff;
            border-radius: 5rpx;
          }
          .album-name {
            margin-top: 10rpx;
            padding-left: 15rpx;
            font-weight: 700;
            font-size: 30rpx;
            color: #000;
          }
        }
        .forward {
          align-self: center;
        }
      }
    }
  }

  .downLoad {
    border-top: 20rpx solid #eeeeee;
    padding: 20rpx 10rpx 40rpx;
    .downLoad-text {
      padding: 20rpx 0;
      background-color: $themeColor;
      font-size: 40rpx;
      font-weight: 700;
      text-align: center;
      color: #fff;
    }
  }
}

.Comment {
  border-top: 30rpx solid #eeeeee;
  padding: 10rpx;
  .comment-title {
    font-weight: 700;
    font-size: 30rpx;
    margin-bottom: 20rpx;
    uni-icons {
      margin: 0 10rpx;
      vertical-align: middle;
    }
  }

  .comment-item:last-child {
    border: none;
  }

  .comment-item {
    display: flex;
    padding: 20rpx 5rpx 25rpx 5rpx;
    border-bottom: 10rpx solid #eeeeee;
    .userTx {
      margin-right: 10rpx;
      flex: 1;
      image {
        width: 100rpx;
        height: 100rpx;
      }
    }

    .baseInfo {
      padding: 5rpx;
      flex: 7;
      .baseInfo-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 50rpx;
        .baseInfo-text {
          .userName {
            color: #5f5e5ea8;
          }

          .commentTime {
            margin: 5rpx 0;
            color: #2b2b2bc4;
          }
        }

        .tagBox {
          display: flex;
          justify-content: flex-end;
          .tag {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            overflow: hidden;
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .baseInfo-bottom {
        display: flex;
        justify-content: space-between;
        .commentContainer {
          font-weight: 700;
        }

        .thumbNumber {
          .uni-icons {
          }
        }
      }
    }
  }
}
</style>
